<template>
  <div class="user-info">
    <div class="item">
      <div class="user flex">
        <img :src="item.avatar" alt="avatar" />
        <div>
          <span class="username">{{ item.nickName }}</span>
          <span>{{ item.email }}</span>
        </div>
      </div>
      <div>
        <span>性别</span>
        <span>{{ item.sex == 0 ? '女' : '男' }}</span>
      </div>
      <div>
        <span>生日</span>
        <span>{{ item.birthday }}</span>
      </div>
      <div>
        <span>年龄</span>
        <span>{{ item.age }}</span>
      </div>
      <div>
        <span>职位</span>
        <div class="flex" v-if="item.duties">
          <span>{{ item.duties.name }}</span>
          <el-tag>{{ item.duties.level }}</el-tag>
        </div>
      </div>
      <el-button type="info">
        <icon-ph-dots-three-vertical-bold />
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IUserInfo } from '@/types/user';

defineProps<{ item: IUserInfo }>()

</script>

<style scoped lang="scss">
.item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 24px 24px;
  border-radius: 15px;
  margin: 20px 0;

  :deep(.el-button) {
    width: 40px;
    padding: 0;
    background-color: rgba($color: #00cec9, $alpha: .1);
    color: black;
    border: none;

  }



  >.user {
    flex-direction: row;
    gap: 15px;

    >img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }

    >div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 4px;

      >span {
        &:nth-of-type(1) {
          font-weight: bold;
          font-size: 16px;
          color: black;
        }

        &:nth-of-type(2) {
          color: #ccc;
          font-size: 12px;
        }


      }


    }
  }

  >div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;

    >span {
      &:nth-of-type(1) {
        color: #ccc;
        font-size: 14px;
      }

      &:nth-of-type(2) {
        font-size: 16px;
      }
    }

    >div {
      gap: 10px;
      color: black;
    }
  }
}
</style>